---
import HeaderLink from './HeaderLink.astro';
import LanguagePicker from '../components/LanguagePicker.astro';
import { SITE_TITLE } from '../consts';
import { getLangFromUrl, useTranslations } from '../i18n/utils';
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const session = Astro.locals.auth ? await Astro.locals.auth.validate() : null;
---
<header class="body-font bg-white">
  <nav class="mx-auto flex max-w-7xl items-center justify-between lg:px-8" aria-label="Global">
	<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
		<a class="flex title-font font-medium items-center mb-4 md:mb-0"  href="/">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-blue-500 rounded-full" viewBox="0 0 24 24">
			<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
		</svg>
		<span class="ml-3 text-xl text-gray-500">{SITE_TITLE}</span>
		</a>
		<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
			<HeaderLink class="mr-5" href={`/${lang}/`}>{t('nav.home')}</HeaderLink>
			<HeaderLink class="mr-5" href={`/${lang}/blog`}>Blog</HeaderLink>
			<HeaderLink class="mr-5" href={`/${lang}/about`}>About</HeaderLink>
		</nav>
		<nav class="flex flex-wrap items-center text-base justify-center">
		<LanguagePicker />
		{session && <form method="post" action=`/${lang}/logout`><input type="submit" value=`${session.user.nickname}` /></form> || 
		<a href=`/${lang}/login` class="inline-flex items-center hover:bg-gray-light border-2 py-1 px-3 focus:outline-none rounded text-base mt-4 md:mt-0">Login</a> }
		</nav>
	</div>
  </nav>
</header>
<style>
	/* header {
		margin: 0;
		padding: 0 1em;
		background: white;
		box-shadow: 0 2px 8px rgba(var(--black), 5%);
	}
	h2 {
		margin: 0;
		font-size: 1em;
	}

	h2 a,
	h2 a.active {
		text-decoration: none;
	}
	nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	nav a {
		padding: 1em 0.5em;
		color: var(--black);
		border-bottom: 4px solid transparent;
		text-decoration: none;
	}
	nav a.active {
		text-decoration: none;
		border-bottom-color: var(--accent);
	}
	.social-links,
	.social-links a {
		display: flex;
	}
	@media (max-width: 720px) {
		.social-links {
			display: none;
		}
	} */
</style>
